import React, { Component } from 'react'
import { Form, Input, Button, message, Image,Row, Col} from 'antd'
import { UserOutlined, LockOutlined, VerifiedOutlined} from '@ant-design/icons'
import md5 from 'js-md5'
import {connect} from 'react-redux'

import {reqLogin, reqVerificationCode} from '../../api'
import {setUser} from '../../redux/actions'
import storageUtils from '../../utils/storageUtils'
import './login.css'

/*
    登录的路由组件
*/
class Login extends Component {

    status = {
        image: "", // 验证码的base64
        key:"",
    }

    handleSubmit = async (values) => {
        const {key} = this.state 
        const {username, password, verification} = values
        // reqLogin(username, password).then(reponse => {
        //     console.log("成功", reponse.data)
        // }).catch(error => {
        //     console.log("失败", error)
        // })
        const reponse = await reqLogin(username, md5(password), key, verification)
        const {status, data} = reponse.data
        if (status === 0) {
            // 提示成功信息
            message.success('登录成功')
            // this.props.history.replace('/')
            // query传值 this.props.history.replace({pathname:'/', query : { username,  password}})
            storageUtils.saveUser(data.user) // 保存user到local
            this.props.setUser(data.user)
            // memoryUtils.user = data
            this.props.history.replace('/')
        } else {
            // 提示错误信息
            message.error(reponse.data.message)
        }
    }

    // 获取base64的验证码图片
    getVerificationCode = async () => {
        const reponse = await reqVerificationCode()
        console.log("reponse", reponse)
        const result = reponse.data
        if (result.status === 0) {
            this.setState({image: result.data.captcha, key: result.data.key})
        } else {
            message.error('验证码获取失败')
        }
    }


    // 组件加载完毕后获取验证码
    componentDidMount () {
        this.getVerificationCode()
    }

    render() {
        // 如果用户已经登录防止通过url再回来，直接跳转到admin界面
        const user = this.props.user
        if (user.id) {
            this.props.history.replace('/')
        }

        const {image} = this.state || ""

        return (
            <div className="login">
                <header>
                    <h1 style={{fontSize: 14}}>Copyright © 2021-2021 wzm All Rights Reserved</h1>
                </header>
                <section className="login-content">
                    <h3>React后台管理系统</h3>
                    <Form onFinish={this.handleSubmit} name="normal_login" className="login-form" initialValues={{ remember: true }}>
                        <Form.Item name="username" rules={[
                            { required: true, message: '请输入用户名' },
                            { max: 12, message: '用户名最大为12位!' },
                            { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文字母、数字或下划线!' }
                            ]}>
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} size={'large'} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item name="password" rules={[
                            { required: true, message: '请输入密码' },
                            { max: 12, message: '密码最大为12位!' },
                            { pattern: /^[a-zA-Z0-9_]+$/, message: '密码必须是英文字母、数字或下划线!' }
                            ]}>
                            <Input prefix={<LockOutlined className="site-form-item-icon" />} size={'large'} type="password" placeholder="密码"/>
                        </Form.Item>
                        <Form.Item name="verification" rules={[
                            { required: true, message: '请输入验证码' }]}>
                                <Row>
                                    <Col span={15}><Input style={{width:'95%'}} prefix={<VerifiedOutlined className="site-form-item-icon" />} size={'large'} placeholder="验证码" /></Col>
                                    <Col span={8}><Image src={image} onClick={this.getVerificationCode} preview={false} placeholder={false}/></Col>
                                </Row>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}

export default connect(
    state => ({user: state.user}),
    {setUser}
)(Login)
